<!--选择通用部分-->
<button type="button" data-toggle="modal" data-target="#author-Modal" class="btn btn-primary" data-url="{:url('api/author/lists')}">选择创作者</button>
<button type="button" class="btn btn-danger del-btn">清除创作者</button>
<input type="hidden" name="author_id" value="{$data['author_id']}" />
<div class="choose author-list">
	{if !empty($data['author_id']) && !empty($data['author'])}
	<div class="item clearfix" data-id="{$data['author_id']}">
		<div class="image">
			<img src="{$data['author']['cover_200']}">
		</div>
		<div class="content">
			<div class="title">{$data['author']['name']}</div>
			<div class="description">{$data['author']['description']}</div>
		</div>
	</div>
	{/if}
</div>

<!-- 选择模态框 start -->
<div class="modal fade" id="author-Modal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h3 class="modal-title">选择创作者</h3>
			</div>
			<div class="modal-body">
				<div class="author-search">
					<div class="input-group">
						<div class="input-control search-box-circle has-icon-left has-icon-right search-example">
						  <input id="inputSearch" type="search" name="keyword" class="form-control search-input" placeholder="搜索">
						  <label for="inputSearch" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
						</div>
						<span class="input-group-btn">
						  <button class="btn btn-primary btn-search" type="button">搜索</button>
						</span>
					</div>
                </div>
				<div class="author-list">
					<p class="text-center">加载中...</p>
				</div>
				<div class="author-page">
                    <ul id="authorChoosePager" data-ride="pager" class="pager" data-elements="prev,nav,next,page_of_total_text"></ul>
                </div>
			</div>
		</div>
	</div>
</div>
<!-- 选择模态框 end -->
<script>
	$(function(){
		//初始化搜索关键字
		var keyword = '';
	    //监听对话框状态
	    $('#author-Modal').on('show.zui.modal', function() {
	        //初始加载第一页
	        getData(1,keyword);
	    });

		//搜索按钮点击事件
		$('.author-search .btn-search').click(function(){
			keyword = $('.author-search input[name="keyword"]').val();
			getData(1,keyword);
		});

	    //监听分页器页码点击
	    $('#authorChoosePager').on('onPageChange', function(e, state, oldState) {
	        if (state.page !== oldState.page) {
	            getData(state.page,keyword);
	        }
	    });
	    
	    //点击列表项后的处理
	    $('#author-Modal').on('click','.item',function(){
	        //写入隐藏域内
	        $('input[name="author_id"]').val($(this).data('id'));
	        //写入表单内
	        $('.choose.author-list').html($(this).prop("outerHTML"));
	        //关闭模态框
	        $('[data-dismiss="modal"]').click();
	    });

	    //移除DOM
	    $('.form-group').on('click','.del-btn',function(){
	        $(this).parent().find('.choose.author-list').html('');
	        $(this).parent().find('input[name="author_id"]').val(0);
	    });

	    //异步加载数据
	    function getData(page,keyword){
			keyword = '' || keyword;
	        var url = $('[data-target="#author-Modal"]').data('url');
	        var url = url + '?rows=5'+'&page='+page+'&keyword='+keyword;
			$('#author-Modal .author-list').html('<div data-loading="正在加载..." class="load-indicator loading" style="width: 100px; height: 100px; margin: 60px auto;"></div>');
	        $.get(url,function(res){
	            if(res.code){
	                //初始化html
	                var html_text = '';
	                if(res.data.data.length>0){
	                    $.each(res.data.data,function(i,n){
	                        html_text += '<div class="item clearfix" data-id='+ n.id +'>';
	                        html_text += '<div class="image"><img src="'+ n.cover_100+'" /></div>';
	                        html_text += '<div class="content">';
	                        html_text += '<div class="title">'+ n.name +'</div>';
	                        html_text += '<div class="description text-ellipsis">'+ n.description +'</div>';
	                        html_text += '</div>';
	                        html_text += '</div>';
	                    });
	                }else{
	                    html_text = '<div class="no-data-box"><div class="no-data-img"></div><div class="no-data-tips">暂无数据</div></div>';
	                }
	                
	                //写入DOM
	                $('#author-Modal .author-list').html(html_text);
					// 获取分页器实例对象
					var authorPager = $('#authorChoosePager').data('zui.pager');
	                // 动态设置当前页码参数
	                authorPager.set(
	                    parseInt(res.data.current_page), 
	                    parseInt(res.data.total), 
	                    parseInt(res.data.per_page));
	            }
	        });
	    }
	});
</script>